<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta name = "format-detection" content="telephone = no" />
    <meta charset="UTF-8">
    <title>PULU邀请好友</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
        html,body{height:100%}
        #logo1 {
            margin-left: 6px;
            background: url(img/homelogoimg.png)no-repeat center;
            background-size: 28px;
        }
        #header>div>div>div{
            text-align: center;
            text-indent: -20px;
        }
        .main,.addFriend,.addFriend2{
            display:none;
            width:100%;
            max-width: 1000px;
            height:100%;
            margin:0 auto;
            box-sizing: border-box;
        }
        .main>.body{
            height:100%;
            background: url("img/sharePage1.png")no-repeat;
            background-size: 100% 100%;
        }
        .main>.body>div{
            height:30%;
            box-sizing: border-box;
            text-align: center;
        }
        .main>.body>div:first-child>img{
            width:100%;
        }
        .main>.body>div:last-child{
            padding:0 20px;
            color:#fff;
            text-align: left;
            height:100%;
        }
        .main>.body>div:last-child>h4{
            font-weight: normal;
            border-bottom:2px solid #fff;
            padding-bottom:10px;
            margin-bottom:10px;
        }
        .main>.body>div:nth-child(2)>p{
            display: inline-block;
            position:relative;
            background:rgb(255,161,88);
            width:80%;
            font-size: 13px;
            line-height: 20px;
            color:#fff;
            text-align: center;
            overflow: hidden;
            height:20px;
            margin-bottom:30px;
            border-top:1px solid rgb(121,121,121);
            border-bottom:1px solid rgb(121,121,121);
        }
        .main>.body>div:nth-child(2)>p:before{
            position:absolute;
            top:-1px;
            left: -15px;
            z-index: 100;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            display: block;
            content: " ";
            width:20px;
            height:20px;
            border:1px solid rgb(121,121,121);
            background:rgb(241,51,51) ;
        }
        .main>.body>div:nth-child(2)>p:after{
            position:absolute;
            top:-1px;
            right: -15px;
            z-index: 100;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            display: block;
            content: " ";
            width:20px;
            height:20px;
            border:1px solid rgb(121,121,121);
            background:rgb(241,51,51) ;
        }
        button{
            width: 70%;
            height: 70px;
            background:transparent;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            position: absolute;
            bottom: 26%;
            left: 50%;
            transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }

        #sharenoticpage {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            background-color: rgba(0,0,0,0.75);
        }
        #sharenoticpage .box>div p {
            font-size: 1.2rem;
            color: #B5B2B1;
            position: absolute;
            right: 100px;
            top: 112px;
            text-align: center;
        }
        #sharenoticpage>.box>div>img {
            width: 100px;
            position: absolute;
            right: 10px;
        }
        #sharenoticpage>.box>img {
            width: 70%;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .addFriend>div{
            position:relative;
            height:100%;
            background: url("img/sharePage2.png")no-repeat;
            background-size: 100% 100%;
        }
        #registerBtn{bottom:-137%;}
        .addFriend>div>div{
            padding:20px;
            text-align: center;
            color:#4D4E4E;
            box-sizing: border-box;
            position:absolute;
            bottom:24%;
        }
        .addFriend>div>div:last-child{
            margin-top:20px;
        }
        .addFriend>div>div>p{
            text-align: left;
            font-size: 18px;
            margin-top:30px;
        }
        #fname i{
            font-style: normal;
            color:#0A85D6;
        }


        .addFriend2>div{
            position:relative;
            height:100%;
            background: url("img/addfriend3.jpg")no-repeat;
            background-size: 100% 100%;
        }
        .addFriend2>div>div:first-child{
            font-size: 18px;
            position: absolute;
            bottom: 35%;
            width: 100%;
            text-align: center;
        }
        .addFriend2>div>div:last-child{
            position: absolute;
            bottom: 16%;
            width: 100%;
            overflow: hidden;
            height: 58px;
            text-align: center;
        }
        #fname2{color:#0A85D6;}
        .addFriend2>div>div:last-child p{
            height:58px;
            display: inline-block;
            width:34%;
        }
        .addFriend2>div>div:last-child p:first-child{margin-right: 3%;}
        .addFriend2>div>div:last-child p:last-child{margin-left: 3%;}

        /*加好友完成提醒*/
        #sendfriendinfook{
            z-index:1000;
            width:100%;
            max-width:1000px;
            position:fixed;
            top:50%;
            transform: translateY(-50%);
            -moz-transform:translateY(-50%) ;
            -ms-transform:translateY(-50%) ;
            -o-transform:translateY(-50%) ;
            -webkit-transform:translateY(-50%) ;
        }
        #sendfriendinfook div{
            width:60%;
            max-width:220px;
            margin:0 auto;
            min-height:80px;
            /*line-height: 80px;*/
            text-align: center;
            font-size: 18px;
            color: #fff;
            background: rgba(53,53,53,0.5);
            overflow: hidden;
            border-radius: 4px;
            padding-top: 26px;
        }
    </style>
    <style>
        #puluUserNote{
            display:none;
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            width:100%;
            background: rgba(0,0,0,0.75);
            z-index: 1000;
        }
        #puluUserNote>div{
            position:relative;
            width:100%;
            height:100%;
        }
        #puluUserNote .model{
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            padding:20px 15px;
            border-radius: 3px;
            background: #fff;
        }
        #puluUserNote .model h4{
            font-weight: normal;
            font-size:16px;
        }
        #puluUserNote .model div{
            min-width:210px;
            padding:10px;
        }
        #puluUserNote .model div span{
            color:#19A2FF;
        }
    </style>
</head>
<body>
<header class="Header" id="header">
    <div class="fixed_header" style="position: fixed">
        <div class="header_main mweb_lookup_bar_has_input">
            <a class="logo symbol_logo"  id="logo1"></a>
            <div class="page_title" style="float:initial;">少走弯路，来铺路</div>
        </div>
    </div>
</header>
<div class="main">
    <div class="body">
        <div>
            <button id="InviteBtn"></button>
        </div>
    </div>
</div>
<div id="sharenoticpage">
    <div class="box">
        <div id="wximgplace">
            <img src="img/puluapp2.png">
            <p>点击右上角<br>分享给朋友和朋友圈</p>
        </div>
        <img src="img/puluapp.png">
    </div>
</div>
<div class="addFriend">
    <div>
        <div>
            <p>
                <span id="fname"></span>邀请你加入铺路，点击“加入铺路”按钮完善资料，即可成为铺路用户
            </p>
        </div>
        <div style="width:100%;"><button id="registerBtn"></button></div>
    </div>
</div>
<div class="addFriend2">
    <div>
        <div>
            <p>
                <span id="fname2"></span>申请加你好友，是否同意？
            </p>
        </div>
        <div>
            <p id="disagreeAddBtn"></p><p id="agreeAddBtn"></p>
        </div>
    </div>
</div>
<!--加好友完成提醒-->
<div id="sendfriendinfook" style="display:none;">
    <div>
        <span>添加成功</span> <br/><span>自动跳转至首页</span>
    </div>
</div>
<!--接收者已经是铺路用户-->
<div id="puluUserNote">
    <div>
        <div class="model">
            <h4>提示：</h4>
            <div>
                您已经是铺路用户，<span onclick="goPulu()">点击进入铺路</span>
            </div>
        </div>
    </div>
</div>
<script src="https://www.pulu.com/weixin/js/jquery-1.11.3.min.js"></script>
<script src="https://www.pulu.com/weixin/js/jquery.cookie.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://www.pulu.com/weixin/ftnjs/urlnote.js"></script>
<script>
    //当前页面进入
    // 1.有无MYID 没有：验证 有：都不展示
    // 2.有无fromuser 有：展示注册按钮 有MYID并且是自己的 不展示

    //菜单栏进入 要删除地址
    if(/clear/.test(location.href)){$.cookie("fromuser","");}
    //判断当前地址参数 先保存fromuser
    if(/fromuser=[0-9a-z]+/.test(location.href)){
        $.cookie("fromuser",(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1]);
    }
    var mynick="",myname="";
    //有用户信息 都是分享页
    if($.cookie("MYID")){
//        $.cookie("fromuser","");
        $("#InviteBtn").click(function(){$("#sharenoticpage").css("display","block");});//邀请按钮
        $("#sharenoticpage").click(function(){$("#sharenoticpage").css("display","none");});//关闭提示
        //第一次进入 拼接自己的地址
        if(!/fromuser=[0-9a-z]+/.test(location.href)){
            location.href="http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID");
        }else{
            //获取拼接参数
            var userid=(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1];
            //如果不是本人 展示加好友 有来源者并且有两个用户ID 提示已经是铺路用户
            if(userid!= $.cookie("MYID")||$.cookie("fromuser")!=$.cookie("MYID")){
                $("#puluUserNote").css("display","block");
//                location.href="http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID");
                var sendfromuser="";
                userid!= $.cookie("MYID")?sendfromuser=userid:$.cookie("fromuser")!=$.cookie("MYID")?sendfromuser=$.cookie("fromuser"):"";
                showPage(sendfromuser);
            }
            //地址转发 去除拼接参数 from= sing...
//            var rightUrl="http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID");
//            if(location.href!==rightUrl){
//                location.href=rightUrl;
//            }
            //获取我的信息
            $.ajax({
                type: "get",
                url: "https://www.pulu.com/webapi/api/puluuser/GetUserInfo?userId="+$.cookie("MYID")+"&friendId="+$.cookie("MYID"),
                datatype: "json",
                success: function (data) {
                    mynick=data.Data.userNick;
//                    if(data.Data.realName){myname="（"+data.Data.realName+"）"}
                }
            });
            $(".main").css("display","block");
            wxshare();
        }
    }
    //没有用户信息
    else{
        //先微信验证获取openid 如果已经授权过了 直接页面截取openid 然后发送请求获取 用户的ID
        var reg=new RegExp("code=[a-zA-Z0-9]*");
        if(window.location.href.match(reg)){
            var code=window.location.href.match(reg);
            $.ajax({
                type:"GET",
                url:"GetOpenId.ashx?"+code,
                async: false,
                success:function(data){
                    var dat=data;
                    $.cookie("wxod",dat);
                    $.cookie("wxopenid",dat);
                    //发请求获取用户的id
                    $.ajax({
                        type:"GET",
                        url:getwxopenidurl+dat,
                        success:function(d){
                            //如果没有用户id 则证明用户是第一次登陆 保存openid跳转至登录页面
                            if(!d.Data||!d.Data.userId){
                                //没有用户信息 并且有来源这
                                if(!$.cookie("MYID")||$.cookie("MYID").length<10){
                                    $.cookie("wxopenid",dat);
                                    $.cookie("wx","over");
                                    //清除地址中的code
                                    var urlFromuser="";
                                    if($.cookie("fromuser")&&/[0-9]+/.test($.cookie("fromuser"))){
                                        urlFromuser="?fromuser="+$.cookie("fromuser");
                                        location.href="http://www.pulu.com/weixin/sharePage.html?fromuser="+urlFromuser;
                                    }
                                    else{location.href="http://www.pulu.com/weixin/index.html";}
                                }
                                //退出登录的
                            }else if(d.Data&&d.Data.userId.length>0){
                                $.cookie("wxopenid",d.Data.openId);
                                $.cookie("MYID",d.Data.userId);
                                $.cookie("MYAVA",d.Data.userAva);
                                $.cookie("MYNICK",d.Data.userNick);
                                $.cookie("validateLevel",d.Data.validateLevel);
                                if($.cookie("fromuser")&&/[0-9]+/.test($.cookie("fromuser"))){
                                    var urlFromuser="?fromuser="+$.cookie("fromuser");
                                    location.href="http://www.pulu.com/weixin/sharePage.html?fromuser="+urlFromuser;
                                }else{
                                    location.href="http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID");
                                }
                            }
                        }
                    })
                }
            })
        }
        else{
            if($.cookie("wx")=="over"){
                //已经验证过没有用户信息
                if(/fromuser=[0-9a-z]+/.test(location.href)){
                    //获取用户信息 展示页面
                    var fromuser=(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1];
                    $.cookie("fromuser",fromuser);
                    showPage(fromuser);
                }
                else{location.href="http://www.pulu.com/weixin/index.html";}
            }else{
                if(/fromuser=[0-9a-z]+/.test(location.href)){
                    var fromuser=(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1];
                    $.cookie("fromuser",fromuser);
                }
                var returnurl=encodeURIComponent("http://www.pulu.com/weixin/sharePage.html"); //同意后跳转页面
                location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx658c34793ecfd9f9&redirect_uri="+returnurl+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
            }
        }
    }
    function showPage(fid){
        //先获取来源用户
        if(fid){
            $.ajax({
                type: "get",
                url: "https://www.pulu.com/webapi/api/puluuser/GetUserInfo?userId="+fid+"&friendId="+fid,
                datatype: "json",
                success: function (data) {
                    console.log(data);
                    fromName=data.Data.userNick;
                    var realName="";
                    if(data.Data.realName){realName="（"+data.Data.realName+"）"}


                    $("#fname").html(fromName);
                    if(!$.cookie("MYID")){
                        $(".main").css("display","none");
                        $(".addFriend").css("display","block");
                        $("#fname").html(fromName+realName);
                    }else{
//                        $(".addFriend2").css("display","block");
//                        $("#fname2").html(fromName+realName);
                        $(".main").css("display","block");

                    }
                }
            });
        }
    }
    function wxshare(){
        //连接微信  转发
        (function(){
//            var fromuser=(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1];
            $.ajax({
                type:"GET",
                url:"GetSign.ashx?p=weixin/sharePage.html?fromuser="+ $.cookie("MYID"),
                success:function(data){
                    timestampone=data.timestamp;
                    nonceStrone=data.nonceStr;
                    signatureone=data.signature;
                    wx.config({
                        debug:false,
                        appId: 'wx658c34793ecfd9f9',
                        timestamp:timestampone, //时间戳
                        nonceStr:nonceStrone,  //随机字符串
                        signature:signatureone,  //SHA1编码
                        jsApiList: [
                            // 所有要调用的 API 都要加到这个列表中
                            "onMenuShareTimeline","onMenuShareAppMessage"
                        ]
                    });
                }
            })
        })();
        wx.ready(function(){
//            var fromuser=(location.href).match(/fromuser=[0-9a-z]+/)[0].split("=")[1];
            //微信转发到朋友圈
            wx.onMenuShareTimeline({
                title:mynick+myname+"邀请你加入铺路",
                link:"http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID"), // 分享链接
                imgUrl:"https://www.pulu.com/weixin/img/puluweixin.jpg", // 分享图标
                success: function () {
                    $("#sharenoticpage").css("display","none");
                    alert("分享成功");
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    //alert("取消分享");
                }
            });
            //微信转发给好友
            wx.onMenuShareAppMessage({
                title:mynick+myname+"邀请你加入铺路", // 分享标题
                desc: '少走弯路，来铺路', // 分享描述
                link:"http://www.pulu.com/weixin/sharePage.html?fromuser="+$.cookie("MYID"), // 分享链接
                imgUrl:"https://www.pulu.com/weixin/img/puluweixin.jpg", // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    $("#sharenoticpage").css("display","none");
                    alert("分享成功");
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    //alert("取消了");
                }
            });
        });
    }
    $("#registerBtn").click(function(){
        location.href="http://www.pulu.com/weixin/index.html#fromuser="+$.cookie("fromuser");
    });
    $("#logo1").click(function(){
        if($.cookie("MYID")){
            location.href="http://www.pulu.com/weixin/pulu.html";//主页
        }else{
            var urlFromuser="";
            if($.cookie("fromuser")&&/[0-9]+/.test($.cookie("fromuser"))){
                urlFromuser="#fromuser="+$.cookie("fromuser");
            }
            location.href="http://www.pulu.com/weixin/index.html"+urlFromuser;
        }
    });

    //已经是铺路用户了
    function goPulu(){
        $("#puluUserNote").css("dispaly","none");
        location.href="http://www.pulu.com/weixin/pulu.html";
    }

    //加好友
//    var isAddFriendClick=false;
//    $("#agreeAddBtn").click(function(){
//        if(!isAddFriendClick){
//            isAddFriendClick=true;
//            $.ajax({
//                type:"post",
//                datatype:"json",
//                url:"https://www.pulu.com/webapi/api/PuluGoodFriend/Addpulu_goodfriend",
//                data:{"userId": $.cookie("fromuser"),"friendId": $.cookie("MYID")},
//                success:function(d){
//                    $("#sendfriendinfook").css("display","block");
//                    setTimeout(function(){
//                        $("#sendfriendinfook").css("display","none");
//                        location.href="http://www.pulu.com/weixin/pulu.html";
//                    },1000)
//                }
//            });
//        }
//    });
    //拒绝加好友
//    $("#disagreeAddBtn").click(function(){
//        $("#sendfriendinfook div").html("<span>您已拒绝 "+fromName+" 的好友申请</span>").css("min-height","51px");
//        $("#sendfriendinfook").css("display","block");
//        $(".addFriend2").css("display","none");
//        $(".main").css("display","block");
//        setTimeout(function(){
//            $("#sendfriendinfook").css("display","none");
//        },1500)
//    })
</script>
</body>
</html>